Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP14。

接著幫原本在 EP12 中，很快速完成的 OrderDetailsPage.xaml 再作一下畫面上的呈現調整。

原本的畫面呈現會是如下：

希望變成如下：

主要是針對 CollectionView 當中的 ItemTemplate 進行 DataTemplate 設計 XAML ，將原本的 XAML 置換成如下 XAML：

<DataTemplate x:DataType="models:OrderDetailDisplay">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label
            Grid.Column="0"
            Grid.ColumnSpan="2"
            FontSize="Large"
            HorizontalOptions="FillAndExpand"
            HorizontalTextAlignment="Start"
            LineBreakMode="HeadTruncation"
            Text="{Binding ProductName}"
            VerticalOptions="CenterAndExpand"
            VerticalTextAlignment="Center" />
        <Label
            Grid.Row="1"
            Grid.Column="0"
            FontSize="Small"
            HorizontalOptions="FillAndExpand"
            HorizontalTextAlignment="Start"
            VerticalOptions="CenterAndExpand"
            VerticalTextAlignment="Center">
            <Label.FormattedText>
                <FormattedString>
                    <FormattedString.Spans>
                        <Span Text="數量: " />
                        <Span FontAttributes="Bold" Text="{Binding Quantity}" />
                    </FormattedString.Spans>
                </FormattedString>
            </Label.FormattedText>
        </Label>
        <Label
            Grid.Row="1"
            Grid.Column="1"
            FontSize="Small"
            HorizontalOptions="FillAndExpand"
            HorizontalTextAlignment="Start"
            VerticalOptions="CenterAndExpand"
            VerticalTextAlignment="Center">
            <Label.FormattedText>
                <FormattedString>
                    <FormattedString.Spans>
                        <Span Text="備註: " />
                        <Span FontAttributes="Bold" Text="{Binding Note}" />
                    </FormattedString.Spans>
                </FormattedString>
            </Label.FormattedText>
        </Label>
        <Button
            Grid.RowSpan="2"
            Grid.Column="2"
            Margin="10,6"
            BackgroundColor="Cyan"
            Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:OrderDetailsPageViewModel}}, Path=SelectCommand}"
            CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"
            HorizontalOptions="CenterAndExpand"
            Text="&gt;&gt;"
            TextColor="Chocolate"
            VerticalOptions="Center" />
    </Grid>
</DataTemplate>

置換的位置如下圖紅框：

即可完成~~~

接著，再 Pages 資料夾再新增一個 OrderDetailShowPage.xaml，當然也記得加上

Shell.TabBarIsVisible="False"

如下圖：

並且先到 AppShell.xaml.cs 來註冊一下此頁面的路由：

Routing.RegisterRoute("Orders/OrderOwners/OrderDetails/OrderDetailShow", typeof(Pages.OrderDetailShowPage));

如下圖：

並回到 OrderDetailsPageViewModel 找到 Select 方法，修改其中 DisplayAlert 的程式碼為 GoToAsync：

await Shell.Current.GoToAsync($"//Orders/OrderOwners/OrderDetails/OrderDetailShow?" +
                                $"orderDetailId={orderDetailDisplay.OrderDetailId}");

如下圖：

而在這邊先不管所要傳遞的參數值，透過幾次的路由設計就會發現，註冊的路由階層順序，將會成為導覽到此頁面的次序。

所以就可以順利地按照 OrdersPage -> OrderOwnersPage -> OrderDetailsPage -> OrderDetailShowPage 順序導覽，反之亦然(返回時)

Android：

iOS：

這裡也順便回應了 EP11 提出轉跳的階層問題囉！

下一回再繼續完成 OrderDetailShowPage 的設計與呈現內容吧~~~